<template>
    <Teleport to="body">
        <Transition name="drawer-slide">
            <div
                v-if="open"
                class="fixed inset-0 bg-gradient-to-b from-[#2c1f3d] to-[#1a0f2e] z-[10000] overflow-hidden"
            >
                <div class="relative w-full h-full overflow-hidden">
                    <!-- 顶部控制栏 -->
                    <div class="absolute top-0 left-0 right-0 p-5 z-10">
                        <div
                            class="w-10 h-10 flex items-center justify-center bg-white/10 rounded-full cursor-pointer transition-all duration-300 hover:bg-white/20 text-white/70 hover:text-white text-lg"
                            @click="closeDrawer"
                        >
                            <DownOutlined />
                        </div>
                    </div>

                    <div class="flex h-full pt-20 px-16 pb-10 gap-24 md:flex-row flex-col overflow-y-auto">
                        <!-- 左侧：黑胶唱片 -->
                        <div class="flex-none md:w-[450px] w-full flex flex-col items-center justify-center gap-8">
                            <!-- 装饰性耳机线 -->
                            <div class="mb-[-20px] opacity-60 hidden md:block">
                                <svg width="200" height="100" viewBox="0 0 200 100">
                                    <path
                                        d="M 30 20 Q 60 10, 90 30 T 150 40"
                                        stroke="rgba(255, 255, 255, 0.4)"
                                        stroke-width="3"
                                        fill="none"
                                        stroke-linecap="round"
                                    />
                                    <circle cx="30" cy="20" r="8" fill="white" opacity="0.8" />
                                    <rect x="145" y="35" width="15" height="10" fill="white" opacity="0.8" rx="2" />
                                </svg>
                            </div>

                            <!-- 黑胶唱片 -->
                            <div
                                class="relative w-[380px] h-[380px] md:w-[380px] md:h-[380px] sm:w-[280px] sm:h-[280px] flex items-center justify-center"
                            >
                                <!-- 外圈唱片 -->
                                <div
                                    class="vinyl-record relative w-full h-full rounded-full"
                                    :class="{ rotating: isPlaying }"
                                >
                                    <!-- 唱片纹理 -->
                                    <div class="vinyl-grooves absolute inset-0 rounded-full"></div>

                                    <!-- 中心区域 -->
                                    <div
                                        class="vinyl-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a] shadow-[0_0_20px_rgba(0,0,0,0.5)] flex items-center justify-center overflow-hidden"
                                    >
                                        <!-- 专辑封面 -->
                                        <div
                                            class="w-full h-full rounded-full bg-cover bg-center bg-white/10 flex items-center justify-center"
                                            :style="{
                                                backgroundImage: `url(${currentSong?.cover || ''})`,
                                            }"
                                        >
                                            <div v-if="!currentSong?.cover" class="text-8xl text-white/30">
                                                <CustomerServiceOutlined />
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 中心点 -->
                                    <div
                                        class="vinyl-hole absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[50px] h-[50px] rounded-full border border-white/10"
                                    ></div>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧：歌词区域 -->
                        <div class="flex-1 flex flex-col min-w-0">
                            <!-- 歌曲信息 -->
                            <div class="mb-6">
                                <div class="flex items-center gap-3 mb-3">
                                    <h2 class="text-[28px] font-semibold m-0 text-white">
                                        {{ currentSong?.name || '未播放' }}
                                    </h2>
                                    <div class="flex gap-1.5">
                                        <span
                                            v-if="currentSong?.vip"
                                            class="px-2 py-0.5 rounded bg-gradient-to-br from-[#e4a853] to-[#d4941e] text-white text-xs font-medium border border-white/30"
                                        >
                                            VIP
                                        </span>
                                        <span
                                            class="px-2 py-0.5 rounded bg-white/15 text-white/80 text-xs font-medium border border-white/20"
                                        >
                                            MV
                                        </span>
                                    </div>
                                </div>
                                <div class="flex flex-col gap-1.5">
                                    <span class="text-[13px] text-white/60"
                                        >专辑：{{ currentSong?.album || '未知专辑' }}</span
                                    >
                                    <span class="text-[13px] text-white/60"
                                        >歌手：{{ currentSong?.artist || '未知艺术家' }}</span
                                    >
                                    <span class="text-[13px] text-white/60">来源：每日歌曲推荐</span>
                                </div>
                            </div>

                            <!-- 标签页 -->
                            <div class="flex gap-6 mb-5 border-b border-white/10">
                                <div
                                    class="tab-item px-1 py-2.5 text-[15px] cursor-pointer transition-all duration-300 relative"
                                    :class="
                                        activeTab === 'lyrics'
                                            ? 'text-white font-medium'
                                            : 'text-white/50 hover:text-white/80'
                                    "
                                    @click="activeTab = 'lyrics'"
                                >
                                    歌词
                                    <div
                                        v-if="activeTab === 'lyrics'"
                                        class="absolute bottom-[-1px] left-0 right-0 h-0.5 bg-white rounded-sm"
                                    ></div>
                                </div>
                                <div
                                    class="tab-item px-1 py-2.5 text-[15px] cursor-pointer transition-all duration-300 relative"
                                    :class="
                                        activeTab === 'info'
                                            ? 'text-white font-medium'
                                            : 'text-white/50 hover:text-white/80'
                                    "
                                    @click="activeTab = 'info'"
                                >
                                    百科
                                    <div
                                        v-if="activeTab === 'info'"
                                        class="absolute bottom-[-1px] left-0 right-0 h-0.5 bg-white rounded-sm"
                                    ></div>
                                </div>
                                <div
                                    class="tab-item px-1 py-2.5 text-[15px] cursor-pointer transition-all duration-300 relative"
                                    :class="
                                        activeTab === 'similar'
                                            ? 'text-white font-medium'
                                            : 'text-white/50 hover:text-white/80'
                                    "
                                    @click="activeTab = 'similar'"
                                >
                                    相似推荐
                                    <div
                                        v-if="activeTab === 'similar'"
                                        class="absolute bottom-[-1px] left-0 right-0 h-0.5 bg-white rounded-sm"
                                    ></div>
                                </div>
                            </div>

                            <!-- 歌词内容区 -->
                            <div class="flex-1 bg-black/20 rounded-xl p-5 overflow-hidden">
                                <div
                                    ref="lyricsContainer"
                                    class="h-full overflow-y-auto overflow-x-hidden pr-3 lyrics-scrollbar"
                                >
                                    <!-- 无歌词状态 -->
                                    <div
                                        v-if="lyrics.length === 0"
                                        class="flex flex-col items-center justify-center h-full text-white/60"
                                    >
                                        <FileTextOutlined class="text-[80px] mb-5 opacity-50" />
                                        <p class="text-lg my-1">暂无歌词</p>
                                        <p class="text-sm my-1 opacity-70">纯音乐，请欣赏</p>
                                    </div>

                                    <!-- 歌词列表 -->
                                    <div v-else class="py-5">
                                        <div
                                            v-for="(line, index) in lyrics"
                                            :key="index"
                                            :ref="(el) => setLyricRef(el, index)"
                                            class="text-lg leading-[2.2] px-4 py-2.5 mb-1 cursor-pointer rounded-md transition-all duration-400"
                                            :class="{
                                                'text-white text-[22px] font-medium bg-white/10 translate-x-2 shadow-[0_2px_8px_rgba(0,0,0,0.3)]':
                                                    index === currentLyricIndex,
                                                'text-white/30': index < currentLyricIndex,
                                                'text-white/40 hover:bg-white/[0.08] hover:text-white/70':
                                                    index !== currentLyricIndex,
                                            }"
                                            @click="seekToLyric(line.time)"
                                        >
                                            {{ line.text }}
                                        </div>
                                        <!-- 底部占位 -->
                                        <div class="h-[300px]"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script lang="ts" setup>
import { ref, watch, computed, nextTick, type ComponentPublicInstance } from 'vue'
import { DownOutlined, CustomerServiceOutlined, FileTextOutlined } from '@ant-design/icons-vue'
import { useMusicStore } from '@/stores'

interface LyricLine {
    time: number
    text: string
}

const props = defineProps<{
    open: boolean
}>()

const emit = defineEmits<{
    (e: 'update:open', value: boolean): void
}>()

const musicStore = useMusicStore()
const currentSong = computed(() => musicStore.currentSong)
const isPlaying = computed(() => musicStore.isPlaying)
const currentTime = computed(() => musicStore.currentTime)

// 歌词数据
const lyrics = ref<LyricLine[]>([])
const currentLyricIndex = ref(0)
const lyricsContainer = ref<HTMLElement>()
const lyricRefs = ref<(HTMLElement | null)[]>([])
const activeTab = ref<'lyrics' | 'info' | 'similar'>('lyrics')

// 设置歌词元素引用
const setLyricRef = (el: Element | ComponentPublicInstance | null, index: number) => {
    if (el) {
        lyricRefs.value[index] = el as HTMLElement
    }
}

// 关闭抽屉
const closeDrawer = () => {
    emit('update:open', false)
}

// 加载歌词
const loadLyrics = () => {
    if (!currentSong.value) return

    // 获取歌词数据
    lyrics.value = musicStore.getCurrentLyrics()
}

// 监听当前时间变化，更新当前歌词索引
watch(currentTime, (time) => {
    if (lyrics.value.length === 0) return

    // 找到当前时间对应的歌词索引
    let index = 0
    for (let i = 0; i < lyrics.value.length; i++) {
        if (time >= lyrics.value[i].time) {
            index = i
        } else {
            break
        }
    }

    if (index !== currentLyricIndex.value) {
        currentLyricIndex.value = index
        scrollToCurrentLyric()
    }
})

// 滚动到当前歌词
const scrollToCurrentLyric = () => {
    if (!lyricsContainer.value || lyricRefs.value.length === 0) return

    nextTick(() => {
        const currentLyricElement = lyricRefs.value[currentLyricIndex.value]
        if (currentLyricElement) {
            const container = lyricsContainer.value!
            const elementTop = currentLyricElement.offsetTop
            const containerHeight = container.clientHeight
            const scrollTop = elementTop - containerHeight / 2 + currentLyricElement.clientHeight / 2

            container.scrollTo({
                top: scrollTop,
                behavior: 'smooth',
            })
        }
    })
}

// 点击歌词跳转到对应时间
const seekToLyric = (time: number) => {
    musicStore.seek(time)
}

// 监听歌曲变化，重新加载歌词
watch(
    currentSong,
    (newSong) => {
        if (newSong) {
            loadLyrics()
            currentLyricIndex.value = 0
        } else {
            lyrics.value = []
            currentLyricIndex.value = 0
        }
    },
    { immediate: true },
)

// 监听抽屉打开，加载歌词
watch(
    () => props.open,
    (isOpen) => {
        if (isOpen && currentSong.value) {
            loadLyrics()
        }
    },
)
</script>

<style scoped>
/* 黑胶唱片样式 */
.vinyl-record {
    background: radial-gradient(circle, #1a1a1a 0%, #2d2d2d 20%, #1a1a1a 40%, #0d0d0d 60%, #000000 100%);
    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.vinyl-record.rotating {
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 唱片纹理 */
.vinyl-grooves {
    background: repeating-radial-gradient(
        circle,
        transparent 0px,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 4px
    );
}

/* 中心点 */
.vinyl-hole {
    background: radial-gradient(circle, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.5);
}

/* 自定义滚动条 */
.lyrics-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.lyrics-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.lyrics-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.lyrics-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.lyrics-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 从底部弹出的过渡动画 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-slide-enter-from,
.drawer-slide-leave-to {
    transform: translateY(100%);
}

/* 响应式 */
@media (max-width: 768px) {
    .md\:w-\[450px\] {
        width: 100%;
    }

    .md\:w-\[380px\] {
        width: 220px !important;
        height: 220px !important;
    }
}
</style>
